import "./App.css";
import { DarkModeToggle } from "./components/DarkModeToggle";
import RestartButton from "./components/RestartButton";
import Results from "./components/Results";
import UserTypings from "./components/UserTypings";
import useEngine from "./hooks/useEngine";
import React from "react";
import { calculateCorrectAccuracy } from "./utils/helpers";
function App() {
  const {
    state,
    words,
    timeLeft,
    typed,
    errors,
    totalTyped,
    restart,
  } = useEngine();
  return (
    <>
      <DarkModeToggle />
      <CountdownTimer deadline={timeLeft} />
      <WordsContainer>
        <GenerateWords words={words} />
        <UserTypings
          userInput={typed}
          className="absolute inset-0"
          words={words}
        />
      </WordsContainer>
      <RestartButton
        onRestart={restart}
        className="mx-auto mt-10 text-slate-500 dark:text-red-400"
      />
      <Results
        className="mt-10"
        errors={errors}
        accuracyPercentage={calculateCorrectAccuracy(totalTyped.current, errors)}
        total={totalTyped.current}
        state={state}
      />
    </>
  );
}
const WordsContainer = ({ children }: { children: React.ReactNode }) => {
  return (
    <div className="relative text-3xl max-w-xl leading-relaxed break-all">
      {children}
    </div>
  );
};
const GenerateWords = ({ words }: { words: string }) => {
  return <div className="text-slate-500 dark:text-primary-400">{words}</div>;
};

const CountdownTimer = ({ deadline }: { deadline: number }) => {
  return <h2 className="text-primary-400 ">Time: {deadline}</h2>;
};

export default App;
